<template>
  <el-card class="box-card" style="background-color: #f0f2f5">
    <el-row>
      <el-col :span="2">
        <div
          style="
            width: 100px;
            height: 100px;
            border: 1px solid white;
            background-color: cornflowerblue;
            text-align: center;
            position: fixed;
          "
        >
          <span style="color: white; line-height: 100px">项目信息</span>
        </div>
        <div
          style="
            width: 100px;
            height: 100px;
            border: 1px solid white;
            background-color: cornflowerblue;
            text-align: center;
            margin-top: 100px;
            position: fixed;
          "
        >
          <span style="color: white; line-height: 100px">基本信息</span>
        </div>
        <div
          style="
            width: 100px;
            height: 100px;
            border: 1px solid white;
            background-color: cornflowerblue;
            text-align: center;
            margin-top: 200px;
            position: fixed;
          "
        >
          <span style="color: white; line-height: 100px">报销信息</span>
        </div>
        <div
          style="
            width: 100px;
            height: 100px;
            border: 1px solid white;
            background-color: cornflowerblue;
            text-align: center;
            margin-top: 300px;
            position: fixed;
          "
        >
          <span style="color: white; line-height: 100px">伦理附件上传</span>
        </div>
        <div
          style="
            width: 100px;
            height: 100px;
            border: 1px solid white;
            background-color: cornflowerblue;
            text-align: center;
            margin-top: 400px;
            position: fixed;
          "
        >
          <span style="color: white; line-height: 100px">文件上传</span>
        </div>
      </el-col>
      <el-col :span="22">
        <div id="page1" class="Card_Div">
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >&nbsp;&nbsp;&nbsp;项目信息</span
          >
          <hr />
          <el-form inline="true" :model="ProjectInfor">
            <el-form-item label="项目名称:">
              <el-input
                class="input_Fill_90"
                v-model="ProjectInfor.ProjectName"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号"></el-form-item>
            <el-form-item label="项目负责人"></el-form-item>
            <el-form-item label="项目总经费(万元)"></el-form-item>
            <el-form-item label="剩余可报销经费(万元)"></el-form-item>
          </el-form>
        </div>
        <div id="page2" class="Card_Div">
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >&nbsp;&nbsp;&nbsp;基本信息</span
          >
          <hr />
        </div>
        <div id="page3" class="Card_Div">
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >&nbsp;&nbsp;&nbsp;报销信息</span
          >
          <hr />
        </div>
        <div id="page4" class="Card_Div">
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >&nbsp;&nbsp;&nbsp;伦理附件上传</span
          >
          <hr />
        </div>
        <div id="page5" class="Card_Div">
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >&nbsp;&nbsp;&nbsp;文件上传</span
          >
          <hr />
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      ProjectInfor: {},
    };
  },
};
</script>

<style scoped>
.Card_Div {
  background-color: white;
  margin: 15px;
  box-shadow: var(--el-box-shadow-dark);
  /* 盒子阴影语法：box-shadow:h-shadow v-shadow blur spread color inset; 
        h-shadow >必须参数，水平阴影的位置，允许负值；
        v-shadow >必须参数，垂直阴影的位置，允许负值
        blur >可选，模糊的距离（影子的虚实）
        spread >可选，阴影的尺寸（影子的大小）
        color >可选，阴影的颜色
        inset >可选，将外部阴影（outset）修改为内部阴影，默认的是外部阴影，但是不可以写这个单词，否则导致阴影无效*/

  /* 如下：默认外部阴影 */
  /* box-shadow: 10px 10px 20px 20px rgba(0, 0, 0, 0.3); */
  /* 如下：修改为内部阴影 */
  /* box-shadow: 10px 10px 20px 20px rgba(0, 0, 0, 0.3) inset; */
}
.input_Fill_90 {
  width: 90%;
}
</style>
